<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="container">
			<h3>等宽列布局</h3>
		 <div class="row">
			 <div class="col border py-3 bg-success text-center">二分之一</div>
			 <div class="col border py-3 bg-success text-center">二分之一</div>
		 </div>
		 <div class="row">
			 <div class="col border py-3 bg-info text-center">三分之一</div>
			 <div class="col border py-3 bg-info text-center">三分之一</div>
			 <div class="col border py-3 bg-info text-center">三分之一</div>
		 </div>
		 <div class="row">
			 <div class="col border py-3 bg-warning text-center">四分之一</div>
			 <div class="col border py-3 bg-warning text-center">四分之一</div>
			 <div class="col border py-3 bg-warning text-center">四分之一</div>
			 <div class="col border py-3 bg-warning text-center">四分之一</div>
		 </div>
		 <div class="row">
			 <div class="col border py-3 bg-primary text-center">十二分之一</div>
			 <div class="col border py-3 bg-primary text-center">十二分之一</div>
			 <div class="col border py-3 bg-primary text-center">十二分之一</div>
			 <div class="col border py-3 bg-primary text-center">十二分之一</div>
			 <div class="col border py-3 bg-primary text-center">十二分之一</div>
			 <div class="col border py-3 bg-primary text-center">十二分之一</div>
			 <div class="col border py-3 bg-primary text-center">十二分之一</div>
			 <div class="col border py-3 bg-primary text-center">十二分之一</div>
			 <div class="col border py-3 bg-primary text-center">十二分之一</div>
			 <div class="col border py-3 bg-primary text-center">十二分之一</div>
			 <div class="col border py-3 bg-primary text-center">十二分之一</div>
			 <div class="col border py-3 bg-primary text-center">十二分之一</div>
		 </div>
		 <h3>等宽多行布局</h3>
		 <div class=container">
		 			 <div class="col border py-3 bg-info ">col</div>
		 			 <div class="col border py-3 bg-info ">col</div>
					 <div class="w-100"></div>
					 <div class="col border py-3 bg-info ">col</div>
					 <div class="col border py-3 bg-info ">col</div>
		 </div>
		 <div class=container">
			<div class="row">
				 <div class="col border py-3 bg-warning ">col</div>
				 <div class="col border py-3 bg-warning ">col</div>
				 <div class="col border py-3 bg-warning ">col</div>
		</div>
		<div class="containner">
			<div class="row">
				<!-- col 列    lg大型设备显示器 -->
				<div class="col col-lg-2 border py-5 bg-primary text-center">左</div>
				<div class="col col-lg-auto border py-5 bg-primary text-center">中</div>
				<!-- auto自适应宽度（内容） -->
				<div class="col col-lg-2 border py-5 bg-primary text-center">右</div>
			</div>
		</div>
		<!-- 响应式的网格系统 -->
		<!-- bootsrap是移动设备优先的框架技术，默认在手机占12列，所以不需要敲.col-12 -->
		<!-- bootstap是一款自带光环的移动框架 -->
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-12 border bg-danger py-5">col-sm-3</div>
				<div class="col-lg-9 col-12 border bg-danger py-5">col-sm-9</div>
			</div>
			<div class="row">
				<div class="col-md-3  border bg-info py-5">col-md-3</div>
				<div class="col-md-9  border bg-info py-5">col-md-9</div>
			</div>
		</div> 
		<!-- 混搭案例 -->
		<div class="container">
			<!-- 
			tail 尾巴
			tailor 裁缝
			container 容器
			fluid 流体液体 -->
			<div class="row">
				<!-- 效果：一行12列，第一列在中型桌面显示器上占12列，手机上占12，有边框 -->
				<div class="col-md-8 col-12 border">左侧</div>
				<div class="col-md-4 col-12 border">右侧</div>
			</div>
			<div class="row">
				<div class="col-6 col-md-4 border bg-secondary py-5">左侧</div>
				<div class="col-6 col-md-4 border bg-secondary py-5">中间</div>
				<div class="col-6 col-md-4 border bg-secondary py-5">右侧</div>
			</div>
		</div>
		<!-- 重排序：bootstarp中提供 -->
	</body>
</html>
